<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Animation of Color</title>
    <meta name="description" content="Animation of Color - A-Frame">
    <script src="../../../dist/aframe.js"></script>
  </head>
  <body>
    <a-scene stats>
      <a-assets>
        <a-mixin id="box" geometry="primitive: box; depth: 0.5; height: 1; width: 0.5"
                 material="color: #2D4659">
        <a-mixin id="pulse" attribute="material.color" from="#FDFBDA" to="#2D4659" dur="1000"
                 begin="pulse"></a-mixin>
      </a-assets>

      <a-sky color="#EFF2DD">
        <a-animation attribute="color" dur="10000" direction="alternate" from="#afafaf"
                     to="#352D4D" repeat="indefinite">
      </a-sky>

      <a-entity position="4.5 1 -7" mixin="box"><a-animation mixin="pulse"></a-animation></a-entity>
      <a-entity position="4 1 -7" mixin="box"><a-animation mixin="pulse"></a-animation></a-entity>
      <a-entity position="3.5 1 -7" mixin="box"><a-animation mixin="pulse"></a-animation></a-entity>
      <a-entity position="3 1 -7" mixin="box"><a-animation mixin="pulse"></a-animation></a-entity>
      <a-entity position="2.5 1 -7" mixin="box"><a-animation mixin="pulse"></a-animation></a-entity>
      <a-entity position="2 1 -7" mixin="box"><a-animation mixin="pulse"></a-animation></a-entity>
      <a-entity position="1.5 1 -7" mixin="box"><a-animation mixin="pulse"></a-animation></a-entity>
      <a-entity position="1 1 -7" mixin="box"><a-animation mixin="pulse"></a-animation></a-entity>
      <a-entity position="0.5 1 -7" mixin="box"><a-animation mixin="pulse"></a-animation></a-entity>
      <a-entity position="0 1 -7" mixin="box"><a-animation mixin="pulse"></a-animation></a-entity>
      <a-entity position="-0.5 1 -7" mixin="box"><a-animation mixin="pulse"></a-animation></a-entity>
      <a-entity position="-1 1 -7" mixin="box"><a-animation mixin="pulse"></a-animation></a-entity>
      <a-entity position="-1.5 1 -7" mixin="box"><a-animation mixin="pulse"></a-animation></a-entity>
      <a-entity position="-2 1 -7" mixin="box"><a-animation mixin="pulse"></a-animation></a-entity>
      <a-entity position="-2.5 1 -7" mixin="box"><a-animation mixin="pulse"></a-animation></a-entity>
      <a-entity position="-3 1 -7" mixin="box"><a-animation mixin="pulse"></a-animation></a-entity>
      <a-entity position="-3.5 1 -7" mixin="box"><a-animation mixin="pulse"></a-animation></a-entity>
      <a-entity position="-4 1 -7" mixin="box"><a-animation mixin="pulse"></a-animation></a-entity>
      <a-entity position="-4.5 1 -7" mixin="box"><a-animation mixin="pulse"></a-animation></a-entity>
      <a-entity position="4.5 1 -7.5" mixin="box"><a-animation mixin="pulse"></a-animation></a-entity>
      <a-entity position="4 1 -7.5" mixin="box"><a-animation mixin="pulse"></a-animation></a-entity>
      <a-entity position="3.5 1 -7.5" mixin="box"><a-animation mixin="pulse"></a-animation></a-entity>
      <a-entity position="3 1 -7.5" mixin="box"><a-animation mixin="pulse"></a-animation></a-entity>
      <a-entity position="2.5 1 -7.5" mixin="box"><a-animation mixin="pulse"></a-animation></a-entity>
      <a-entity position="2 1 -7.5" mixin="box"><a-animation mixin="pulse"></a-animation></a-entity>
      <a-entity position="1.5 1 -7.5" mixin="box"><a-animation mixin="pulse"></a-animation></a-entity>
      <a-entity position="1 1 -7.5" mixin="box"><a-animation mixin="pulse"></a-animation></a-entity>
      <a-entity position="0.5 1 -7.5" mixin="box"><a-animation mixin="pulse"></a-animation></a-entity>
      <a-entity position="0 1 -7.5" mixin="box"><a-animation mixin="pulse"></a-animation></a-entity>
      <a-entity position="-0.5 1 -7.5" mixin="box"><a-animation mixin="pulse"></a-animation></a-entity>
      <a-entity position="-1 1 -7.5" mixin="box"><a-animation mixin="pulse"></a-animation></a-entity>
      <a-entity position="-1.5 1 -7.5" mixin="box"><a-animation mixin="pulse"></a-animation></a-entity>
      <a-entity position="-2 1 -7.5" mixin="box"><a-animation mixin="pulse"></a-animation></a-entity>
      <a-entity position="-2.5 1 -7.5" mixin="box"><a-animation mixin="pulse"></a-animation></a-entity>
      <a-entity position="-3 1 -7.5" mixin="box"><a-animation mixin="pulse"></a-animation></a-entity>
      <a-entity position="-3.5 1 -7.5" mixin="box"><a-animation mixin="pulse"></a-animation></a-entity>
      <a-entity position="-4 1 -7.5" mixin="box"><a-animation mixin="pulse"></a-animation></a-entity>
      <a-entity position="-4.5 1 -7.5" mixin="box"><a-animation mixin="pulse"></a-animation></a-entity>

      <a-plane rotation="-90 0 0" width="40" height="40" color="#A7BCB9"></a-plane>
    </a-scene>
  </body>

  <script>
    var sceneEl = document.querySelector('a-scene');
    var boxEls  = document.querySelectorAll('[mixin="box"]');

    sceneEl.loaded ? main() : sceneEl.addEventListener('loaded', main);

    function main () {
      pulse();

      function pulse () {
        requestAnimationFrame(pulse);

        var index = 0;
        var loop = setInterval(function loopPulse () {
          boxEls[index].emit('pulse')
          boxEls[boxEls.length - 1 - index].emit('pulse')
          index++;
          if (index >= boxEls.length / 2) { clearInterval(loop); }
        }, 100)
      }
    }
  </script>
</html>

